<script lang="ts">
  import { _ } from 'svelte-i18n'
  import type { WalletState, i18n } from '../../types.js'

  import WalletAppBadge from '../shared/WalletAppBadge.svelte'
  import questionIcon from '../../icons/question.js'
  import en from '../../i18n/en.json'
  import { state } from '../../store/index.js'
  import { shareReplay, startWith } from 'rxjs'

  export let connectWallet: () => Promise<void>
  export let selectedWallet: WalletState
  export let deselectWallet: (label: string) => void
  export let setStep: (update: keyof i18n['connect']) => void
  export let connectionRejected: boolean
  export let previousConnectionRequest: boolean

  const appMetadata$ = state
    .select('appMetadata')
    .pipe(startWith(state.get().appMetadata), shareReplay(1))
</script>

<style>
  .container {
    padding: var(--onboard-spacing-4, var(--spacing-4));
  }

  .connecting-container {
    width: 100%;
    padding: var(--onboard-spacing-4, var(--spacing-4));
    transition: background-color 100ms ease-in-out,
      border-color 100ms ease-in-out;
    border-radius: 24px;
    background: var(--onboard-primary-100, var(--primary-100));
    border: 1px solid;
    border-color: var(--onboard-primary-300, var(--primary-300));
    color: var(--onboard-gray-600, var(--gray-600));
  }

  .connecting-container.warning {
    background: var(--onboard-warning-100, var(--warning-100));
    border-color: var(--onboard-warning-400, var(--warning-400));
  }

  .text {
    line-height: 16px;
    margin-bottom: var(--onboard-spacing-5, var(--spacing-5));
  }

  .text.text-rejected {
    line-height: 24px;
    margin-bottom: 0;
  }

  .subtext {
    font-size: var(--onboard-font-size-7, var(--font-size-7));
    line-height: 16px;
  }

  .rejected-cta {
    color: var(--onboard-primary-500, var(--primary-500));
  }

  .onboard-button-primary {
    bottom: var(--onboard-spacing-3, var(--spacing-3));
  }

  .ml {
    margin-left: var(--onboard-spacing-4, var(--spacing-4));
  }

  @media all and (max-width: 520px) {
    .connecting-container {
      border-radius: var(--onboard-border-radius-4, var(--border-radius-4));
    }

    .container {
      padding-bottom: 0;
    }

    .wallet-badges {
      display: none;
    }

    .connecting-wallet-info {
      margin: 0;
    }

    .onboard-button-primary {
      display: none;
    }
  }
</style>

<div class="container flex flex-column items-center">
  <div
    class="connecting-container flex justify-between items-center"
    class:warning={connectionRejected || previousConnectionRequest}
  >
    <div class="flex">
      <div class="flex justify-center relative wallet-badges">
        <WalletAppBadge
          size={40}
          padding={8}
          icon={($appMetadata$ && $appMetadata$.icon) || questionIcon}
          border={connectionRejected || previousConnectionRequest
            ? 'yellow'
            : 'blue'}
          background="lightGray"
        />

        <div class="relative" style="right: 0.5rem;">
          <WalletAppBadge
            size={40}
            padding={8}
            border={connectionRejected || previousConnectionRequest
              ? 'yellow'
              : 'blue'}
            background="white"
            icon={selectedWallet.icon}
          />
        </div>
      </div>

      <div class="flex flex-column justify-center ml connecting-wallet-info">
        <div class="text" class:text-rejected={connectionRejected}>
          {$_(
            `connect.connectingWallet.${
              connectionRejected ? 'rejectedText' : 'mainText'
            }`,
            {
              default: connectionRejected
                ? en.connect.connectingWallet.rejectedText
                : en.connect.connectingWallet.mainText,
              values: { wallet: selectedWallet.label }
            }
          )}
        </div>
        {#if connectionRejected}
          <div class="rejected-cta pointer subtext" on:click={connectWallet}>
            {$_('connect.connectingWallet.rejectedCTA', {
              default: en.connect.connectingWallet.rejectedCTA,
              values: { wallet: selectedWallet.label }
            })}
          </div>
        {:else}
          <div class="subtext">
            {$_(
              `connect.connectingWallet.${
                previousConnectionRequest ? 'previousConnection' : 'paragraph'
              }`,
              {
                default: en.connect.connectingWallet.paragraph,
                values: { wallet: selectedWallet.label }
              }
            )}
          </div>
        {/if}
      </div>
    </div>
  </div>

  <button
    on:click={() => {
      deselectWallet(selectedWallet.label)
      setStep('selectingWallet')
    }}
    class="onboard-button-primary absolute"
    >{$_('connect.connectingWallet.primaryButton', {
      default: en.connect.connectingWallet.primaryButton
    })}</button
  >
</div>
